<template>
  <div class="pages">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 20, 25]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="signalsRadio1.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRadio1Store } from "@/pain/search/search";
const signalsRadio1 = useRadio1Store();
const currentPage = ref(1);
const pageSize = ref(10);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  pageSize.value = val;
  signalsRadio1.page.pageSize = val;
  if (signalsRadio1.id == "1") {
    signalsRadio1.getsearch();
  }
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  signalsRadio1.page.currentPage = val;
  if (signalsRadio1.id == "1") {
    signalsRadio1.getsearch();
  }
};

// defineExpose({ currentPage , pageSize })
</script>

<style lang="scss" scoped>
.pages {
  padding: 20px;
}
</style>
